/* eslint-disable react/display-name */
import React from 'react'
import { connect } from 'dva'
import styles from './CustomerService.less'
import { Button, Table, Modal, Form, message, Divider } from 'antd'
import Header from '../../components/Header/index'
import propTypes from 'prop-types'
import gql from 'graphql-tag'
import { GQL as AGQL } from '../../components/GQL'
import CustomModal from './components/Modal'

const SERVICE_TYPES = {
  PersQQ: '个人QQ',
  EnterQQ: '企业QQ',
  Wangwang: '旺旺',
  WeChat: '微信',
  Tel: '电话'
}

// 头部数据
const headerData = {
  title: '客服初始化',
  hasPopover: true,
  popoverContent: <p>设置您的客户在订货平台联系您的基础内容：如：QQ、微信、电话、旺旺</p>,
  hasSubNav: true,
  subNavItem: [{
    title: '首页',
    link: true
  }, {
    title: '系统',
    link: false
  }, {
    title: '公司设置',
    link: true
  }]
}
// 删除数据组件
const Delete = ({ delCustomService, record, refetch }) => {
  return (
    <a onClick={() => confirm(record, delCustomService, refetch)}>删除</a>
  )
}

const DeleteAGQL = AGQL({
  mutation: gql`
    mutation delCustomService($id: Int!){
      delCustomService(id: $id) {
      status
      message
    }
  }`,
  name: 'delCustomService'
})(Delete)

// 确认删除框
function confirm ({ serviceId }, del, refetch) {
  Modal.confirm({
    title: '系统提示',
    content: '确定删除该联系方式吗？',
    okText: '确认',
    cancelText: '取消',
    onOk () {
      del({ variables: { id: parseInt(serviceId) } }).then(res => {
        message.success(res.data.delCustomService.message)
        refetch()
      }).catch(err => {
        console.log(err)
      })
    }
  })
}

function CustomerService ({ loading, data, dispatch, customerService, refetch }) {
  // dispatch是一个方法通过引入传入使用
  // customerService对应的就是state上的数据对象
  // console.log(customerService)
  const { customServicelist = [] } = data
  const { service } = customerService

  // 定义table 格式
  const columns = [{
    title: '',
    dataIndex: 'index',
    width: 40,
    render: (text, record, index) => index + 1
  }, {
    title: '类型',
    dataIndex: 'serviceType',
    width: 120,
    render: text => SERVICE_TYPES[text]
  }, {
    title: '名称',
    dataIndex: 'serviceName',
    width: 120
  }, {
    title: '号码',
    dataIndex: 'serviceNumber',
    width: 200
  }, {
    title: '排序',
    dataIndex: 'orderNum'
  }, {
    title: '操作',
    width: 300,
    dataIndex: 'add',
    render: (text, record) => (
      <div>
        <a onClick={() => dispatch({ type: 'customerService/save', payload: { visible: true, service: record } })}>修改</a>
        <Divider type='vertical' />
        <DeleteAGQL record={record} refetch={refetch} />
      </div>
    )
  }]

  return (
    <div>
      <Header header={headerData} />
      <CustomModal service={service} refetch={refetch} visible={customerService.visible} />
      <div>
        <Button onClick={() => dispatch({ type: 'customerService/save', payload: { visible: true, service: {} } })} style={{ margin: '15px' }} type='primary'>新增客服/联系方式</Button>
      </div>
      <div className={styles.table}>
        <Table loading={loading} dataSource={customServicelist} columns={columns} pagination={false} />
      </div>
    </div>
  )
}

CustomerService.propTypes = {
  loading: propTypes.bool,
  data: propTypes.object,
  customerService: propTypes.object,
  dispatch: propTypes.func,
  form: propTypes.object,
  refetch: propTypes.func
}

Delete.propTypes = {
  delCustomService: propTypes.func,
  record: propTypes.object,
  refetch: propTypes.func
}

const mapStateToProps = ({ customerService }) => ({ customerService })
export default (AGQL({
  query: gql`
    query{
      customServicelist{
        serviceType
        serviceName
        serviceNumber
        orderNum
        serviceId
        qrCode
      }
    }
  `,
  fetchPolicy: 'no-cache',
  notifyOnNetworkStatusChange: true
})(connect(mapStateToProps)(Form.create()(CustomerService))))
